<template>
  <div>
    <el-row :gutter='20'>
      <el-col :span='12'>
        <el-card shadow='never'>
          <template #header>
            <div>
              业务查询
            </div>
          </template>
          <el-form ref='formRef' :inline='true' :model='searchForm' label-width='80px'>
            <el-form-item label='视频号ID' prop='video_id'>
              <el-input v-model='searchForm.video_id' />
            </el-form-item>
            <el-form-item label='微信ID' prop='wechat_id'>
              <el-input v-model='searchForm.wechat_id' />
            </el-form-item>
            <el-form-item label='姓名' prop='wechat_id'>
              <el-input v-model='searchForm.user_name' />
            </el-form-item>
            <el-form-item>
              <el-button type='primary' @click='query'>搜索</el-button>
              <el-button type='' @click='resetQuery'>重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-link type='primary'>
                【{{ searchCount }}】
              </el-link>
              条
            </el-form-item>
          </el-form>
          <el-table :data='tableData' border stripe style='width: 100%' @sort-change='sortChange'
                    :default-sort="{ prop: 'canupdate', order: 'ascending' }">
            <el-table-column prop='id' label='ID' />
            <el-table-column prop='user_id' label='员工ID' />
            <el-table-column prop='departmentname' label='部门' />
            <el-table-column prop='user_name' label='姓名'>
              <template #default='{ row }'>
                <div>
                  {{ row.username }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop='video_id' label='视频号ID' width='120' sortable='custom' />
            <el-table-column prop='wechat_id' label='微信ID' sortable='custom' />
            <el-table-column prop='order_img' label='截图'>
              <template #default='{ row }'>
                <div>
                  <el-popover placement='right' :width='400' trigger='hover'>
                    <template #reference>
                      <el-image :src='row.order_img' style='width:40px;'></el-image>
                    </template>
                    <el-image :src='row.order_img' style='width:375px;'></el-image>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop='start_at' label='开始时间'>
              <template #default='{ row }'>
                {{ row.start_at }}
              </template>
            </el-table-column>
            <el-table-column prop='expired_at' label='过期时间'>
              <template #default='{ row }'>
                {{ row.expired_at }}
              </template>
            </el-table-column>
            <el-table-column prop='created_at' label='创建时间' />
            <el-table-column prop='updated_at' label='更新时间' />
          </el-table>
          <el-pagination class='mt-3' :current-page='currentPage' @size-change='handleSizeChange'
                         @current-change='handleCurrentChange' background :total='pageObj.total'
                         :page-size='pageObj.pageSize'
                         layout='total,prev, pager, next' />
        </el-card>
      </el-col>
      <el-col :span='12'>
        <el-card shadow='never'>
          <template #header>
            <div>
              已删除数据
            </div>
          </template>
          <el-form ref='formRef1' :inline='true' :model='searchForm1' label-width='80px'>
            <el-form-item label='视频号ID' prop='video_id'>
              <el-input v-model='searchForm1.video_id' />
            </el-form-item>
            <el-form-item label='微信ID' prop='wechat_id'>
              <el-input v-model='searchForm1.wechat_id' />
            </el-form-item>
            <el-form-item>
              <el-button type='primary' @click='query1'>搜索</el-button>
              <el-button type='' @click='resetQuery1'>重置</el-button>
            </el-form-item>
          </el-form>
          <el-table :data='tableData1' border stripe style='width: 100%'
                    :default-sort="{ prop: 'canupdate', order: 'ascending' }">
            <el-table-column prop='id' label='ID' />
            <el-table-column prop='user_id' label='员工ID' />
            <el-table-column prop='departmentname' label='部门' />
            <el-table-column prop='user_name' label='员工姓名'>
              <template #default='{ row }'>
                <div>
                  {{ row.username }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop='video_id' label='视频号ID' />
            <el-table-column prop='wechat_id' label='微信ID' />
            <el-table-column prop='order_img' label='截图'>
              <template #default='{ row }'>
                <div>
                  <el-popover placement='right' :width='400' trigger='hover'>
                    <template #reference>
                      <el-image :src='row.order_img' style='width:40px;'></el-image>
                    </template>
                    <el-image :src='row.order_img' style='width:375px;'></el-image>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop='start_at' label='开始时间'>
              <template #default='{ row }'>
                {{ row.start_at }}
              </template>
            </el-table-column>
            <el-table-column prop='expired_at' label='过期时间'>
              <template #default='{ row }'>
                {{ row.expired_at }}
              </template>
            </el-table-column>
            <el-table-column prop='created_at' label='创建时间' />
            <el-table-column prop='updated_at' label='更新时间' />
          </el-table>
          <el-pagination class='mt-3' :current-page='currentPage1'
                         @current-change='handleCurrentChange1' background :total='pageObj1.total'
                         :page-size='pageObj1.pageSize'
                         layout='total,prev, pager, next' />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang='ts'>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

const { index, update, trashed } = useRecord()

const tableData = ref([])
const pageObj = reactive({
  total: 0,
  pageSize: 0,
  pagerCount: 0,
  currentPage: 0,
})

const currentPage = ref(1)
const getData = async (page: number = 1, obj: Object = {}) => {
  currentPage.value = page
  let { data } = await index(page, obj)
  tableData.value = data.data.data
  pageObj.total = data.data.total
  pageObj.currentPage = data.data.current_page
  pageObj.pageSize = data.data.per_page
  searchCount.value = data.count
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = async (val: number) => {
  await getData(val, searchForm)
}
const sortChange = async (e: any) => {
  const { order, prop } = e
  if (order == null) {
    return
  }
  searchForm.prop = prop
  searchForm.order = order
  await getData(currentPage.value, searchForm)
}

const searchCount = ref(0)
const query = async () => {
  if (searchForm.video_id || searchForm.wechat_id || searchForm.user_name) {
    let { data } = await index(1, searchForm)
    tableData.value = data.data.data
    pageObj.total = data.data.total
    pageObj.currentPage = data.data.current_page
    pageObj.pageSize = data.data.per_page
    searchCount.value = data.count
  } else {
    ElMessage.warning('请输入内容')
  }
}
let searchForm = reactive({
  video_id: '',
  wechat_id: '',
  user_name: '',
  prop: '',
  order: '',
})
const formRef = ref()

const resetQuery = async () => {
  formRef.value.resetFields()
  await getData()
  searchForm.prop = ''
  searchForm.order = ''
  searchForm.wechat_id = ''
  searchForm.video_id = ''
  searchForm.user_name = ''
  currentPage.value = 1
}


// ==业绩查询==

onMounted(() => {
  getData()
  getData1()
})
const tableData1 = ref([])
const pageObj1 = reactive({
  total: 0,
  pageSize: 0,
  pagerCount: 0,
  currentPage: 0,
})

const currentPage1 = ref(1)

const getData1 = async (page: number = 1, obj: Object = {}) => {
  currentPage1.value = page
  let { data } = await trashed(page, obj)
  tableData1.value = data.data
  pageObj1.total = data.total
  pageObj1.currentPage = data.current_page
  pageObj1.pageSize = data.per_page
}
const handleCurrentChange1 = async (val: number) => {
  await getData1(val, searchForm)
}

const query1 = async () => {
  if (searchForm1.video_id || searchForm1.wechat_id || searchForm1.user_name) {
    let { data } = await trashed(1, searchForm1)
    tableData1.value = data.data
    pageObj1.total = data.total
    pageObj1.currentPage = data.current_page
    pageObj1.pageSize = data.per_page
  } else {
    ElMessage.warning('请输入内容')
  }
}
let searchForm1 = reactive({
  prop:"",
  order:"",
  video_id: '',
  wechat_id: '',
  user_name: '',
})
const formRef1 = ref()

const resetQuery1 = async () => {
  formRef1.value.resetFields()
  await getData1()
  searchForm1.prop = ''
  searchForm1.order = ''
  searchForm1.wechat_id = ''
  searchForm1.video_id = ''
  searchForm1.user_name = ''
  currentPage1.value = 1
}

</script>

<style lang='scss' scoped></style>